<template>
  <div class="block">
    <el-timeline v-for="(item, index) in timelines" :key="index" >
      <el-timeline-item :timestamp="item.time | dateFmt" placement="top">
        <div class="timeline-box">
        <el-descriptions :title="item.title " class="box-left">
          <el-descriptions-item label="来源"
            >{{ item.source }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag size="small">{{ item.tag ? item.tag : '文档' }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div class="box-right">
          <div class="isNopic" v-if="item.url === ''||item.url === 'string'">
            <el-empty description="暂无封面"></el-empty>
          </div>
          <img :src="item.url" alt="" v-else>

        </div>
        </div>
        <el-divider></el-divider>
      </el-timeline-item>
    </el-timeline>

    <div class="title">
      <span>展示最近的三条文档！查看文档详情请移步相关页面</span>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { ThreeLine } from '@/utils/api/mine/timeLine.js'
export default {
  name: '',
  props: {},
  filters: {
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  components: {},
  data () {
    return {
      timelines: [],
      isPic: false
    }
  },
  created () {
    this.getTimeLine()
  },
  methods: {
    // 获取最新三条文档数据
    getTimeLine () {
      ThreeLine().then(res => {
        this.timelines = res.data.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.block {
  .timeline-box{
    display: flex;
    .box-left{
      flex: 5;
    }
    .box-right{
      flex: 2;
      img{
        width: 100px;
      }
      .isNopic{
        width: 60px;
        height: 100px;
        /deep/.el-empty__image{
          width: 100%;
        }
        /deep/.el-empty{
          padding: 0;
        }
        /deep/.el-empty__description{
          margin-top: 0;
        }
      }
    }
  }
  span {
    margin-right: 10px;
  }
  .title {
    color: #ddd;
    text-align: center;
  }
  .el-divider--horizontal{
    margin: 10px 0;
  }
}
</style>
